<template>
  <div class="props-panel">
    <div class="props-panel-head"></div>
    <div class="props-panel-body">
      <div
        class="props-btn"
        v-for="item in items"
        :key="item.id"
        :title="item.title"
        :class="selected === item.id ? 'selected' : ''"
        @click="handleClick(item.id)"
      >
        <i class="icon iconfont" :class="item.icon"></i>
      </div>
      <div class="view-wrapper" v-show="selected !== undefined">
        <div class="view" v-show="selected === 0">
          <div class="view-head">
            <span>导航</span>
            <div class="collapsed" @click="handleCollapsed">
              <i class="icon iconfont icon-zhedie"></i>
            </div>
          </div>
          <div class="view-body">
            <div id="minimap"></div>
            <div class="view-row-divider"></div>
            <div class="view-row">
              <el-tooltip effect="dark" content="放大" placement="bottom">
                <div class="view-control-btn">
                  <span>
                    <i class="icon iconfont icon-icon--"></i>
                  </span>
                </div>
              </el-tooltip>
              <el-tooltip effect="dark" content="缩小" placement="bottom">
                <div class="view-control-btn">
                  <span>
                    <i class="icon iconfont icon-icon--1"></i>
                  </span>
                </div>
              </el-tooltip>
              <el-tooltip effect="dark" content="重置" placement="bottom">
                <div class="view-control-btn">
                  <span>
                    <i class="icon iconfont icon-zhongzhi"></i>
                  </span>
                </div>
              </el-tooltip>
            </div>
          </div>
        </div>
        <div class="view" v-show="selected === 1">
          <div class="view-head">
            <span>样式</span>
            <div class="collapsed" @click="handleCollapsed">
              <i class="icon iconfont icon-zhedie"></i>
            </div>
          </div>
          <div class="view-body">
            <div class="view-item-title">连线</div>
            <div class="view-row-divider"></div>
            <div class="view-item-title">填充颜色</div>
            <div class="view-row-divider"></div>
            <div class="view-item-title">透明度</div>
          </div>
        </div>
        <div class="view" v-show="selected === 2">
          <div class="view-head">
            <span>度量</span>
            <div class="collapsed" @click="handleCollapsed">
              <i class="icon iconfont icon-zhedie"></i>
            </div>
          </div>
          <div class="view-body">
            <div class="view-item-title">位置和大小</div>
            <div class="view-row-divider"></div>
            <div class="view-item-title">旋转方向</div>
          </div>
        </div>
        <div class="view" v-show="selected === 3">
          <div class="view-head">
            <span>数据属性</span>
            <div class="collapsed" @click="handleCollapsed">
              <i class="icon iconfont icon-zhedie"></i>
            </div>
          </div>
          <div class="view-body"></div>
        </div>
        <div class="view" v-show="selected === 4">
          <div class="view-head">
            <span>页面设置</span>
            <div class="collapsed" @click="handleCollapsed">
              <i class="icon iconfont icon-zhedie"></i>
            </div>
          </div>
          <div class="view-body">
            <div class="view-item-title">页面</div>
            <div class="view-row-divider"></div>
            <div class="view-item-title">网格</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import items from "./items";

export default {
  name: "props-panel",
  data() {
    return {
      items,
      selected: undefined,
    };
  },
  methods: {
    handleClick(id) {
      if (this.selected === id) {
        this.selected = undefined;
      } else {
        this.selected = id;
      }
    },
    handleCollapsed() {
      this.selected = undefined;
    },
  },
};
</script>

<style lang="less" scoped>
.props-panel {
  width: 36px;
  position: absolute;
  top: 30px;
  right: 8px;

  .props-panel-head {
    width: 100%;
    height: 8px;
    background-color: rgb(92, 92, 92);
  }

  .props-panel-body {
    width: 100%;
    box-sizing: border-box;
    border-left: 1px solid rgb(170, 170, 170);
    border-bottom: 1px solid rgb(170, 170, 170);
    background-color: rgb(249, 249, 249);
    position: relative;

    .props-btn {
      width: 100%;
      height: 36px;
      box-sizing: border-box;
      padding: 6px 6px;
      cursor: pointer;

      .icon {
        display: block;
        width: 24px;
        height: 24px;
        box-sizing: border-box;
        border: 1px solid transparent;
        border-radius: 2px;
        font-size: 18px;

        display: flex;
        justify-content: center;
        align-items: center;

        &:hover {
          border: 1px solid rgb(204, 204, 204);
        }
      }

      &.selected {
        .icon {
          border: 1px solid rgb(204, 204, 204);
          background-color: #eeeeee;
        }
      }
    }

    .view-wrapper {
      position: absolute;
      top: 0;
      right: 100%;
      width: 220px;
      border: 1px solid #000;
      box-shadow: 0px 1px 4px 2px #dddddd;

      .view-head {
        width: 100%;
        height: 20px;
        padding-left: 10px;
        padding-right: 4px;
        font-size: 13px;
        background-color: #a6a6a6;

        display: flex;

        .collapsed {
          margin-left: auto;
          width: 20px;
          height: 20px;
          line-height: 20px;
          font-weight: bolder;
          cursor: pointer;
          transform: rotate(180deg);

          &:hover {
            .icon {
              border-radius: 2px;
              background-color: #777;
            }
          }
        }
      }

      .view-body {
        width: 100%;
        padding: 10px 0;
        background-color: #eee;

        display: flex;
        flex-direction: column;
        align-items: center;

        #minimap {
          width: 160px;
          height: 200px;
          border: 1px solid rgb(136, 136, 136);
          border-radius: 4px;
          overflow: hidden;
        }

        .view-item-title {
          width: 88%;
          height: 20px;
          font-size: 13px;
          font-weight: bold;
        }

        .view-row-divider {
          width: 88%;
          border-top: 1px solid rgb(170, 170, 170);
          margin: 10px 0;
        }

        .view-row {
          width: 88%;
          height: 24px;

          display: flex;
          justify-content: space-around;

          .view-control-btn {
            height: 24px;
            border: 1px solid #a1a1a1;
            margin: 0 10px;
            border-radius: 2px;
            cursor: pointer;

            & > span {
              width: 24px;
              line-height: 24px;
              font-weight: bold;

              display: flex;
              justify-content: center;
              align-items: center;
            }

            &:hover {
              background-color: #fff;
            }
          }
        }
      }
    }
  }
}
</style>
